<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习vue</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin: 12px;
        }
    </style>
</head>
<body>
    <div id="root">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        Vue.prototype.x = 99
        function Demo(){
            this.a = 1
            this.b = 2
        }
        const a = new Demo()
        // 显式原型属性
        console.log(Demo.prototype)
        // 隐式原型属性
        console.log(a.__proto__)
        // 原型对象是同一个。
        // 实例的原型对象就是其缔造者的原型对象！！！！！！
        console.log(Demo.prototype === a.__proto__)
        // 加了一个原型对象的属性
        Demo.prototype.x = 99
        // 从这里读出来
        console.log(a.__proto__.x)
        // 因为会自动去查找__proto__里面的属性
        // 所以可以简化成
        console.log(a.x)
        //这里不能简写，因为简写的话，就验证不了app.prototype.__proto__ === Vue.prototype了
        const app = Vue.extend({
            template:`
                <h1>    
                    hello
                </h1>
            `,
            mounted() {
                //能访问到原型上的属性和方法。
                console.log("this.x =>",this.x)
            },
        })
        new Vue({
            el:'#root',
            template:"<app></app>",
            components:{
                app
            },
            mounted() {
            },
        })
        console.log(app)
        console.log(app.prototype)
        console.log(app.prototype.__proto__)
        console.log(app.__proto__)
        // 一个重要的内置关系。
        console.log(app.prototype.__proto__ === Vue.prototype)
    </script>    
</body>
</html>